<template>
	<!-- 预约确认界面 -->
	<view class="outtor">
		<view class="order_detail">
			<view class="order_detail_content" v-if="orderList.length!=0" v-for="i in orderList">
				<view class="content_left">
					<image :src="i.url"></image>
				</view>
				<view class="content_right">
					<view class="content_right_top">
						<view>
							<view>
								<text>开始时间</text>
							</view>
							<view class="blue">
								<text>{{i.startTime}}</text>
							</view>
						</view>
						<view class="quan">
							<text>{{i.days}}天</text>
						</view>
						<view>
							<view>
								<text>结束时间</text>
							</view>
							<view class="blue">
								<text>{{i.endTime}}</text>
							</view>
						</view>
					</view>
					<view class="content_right_bottom">
						<view>
							<text>{{i.campName}}</text>
						</view>
						<view>
							<text>{{i.carName}}</text>
						</view>
						<view>
							<text>单价：￥{{i.price}}.00/每晚</text>
						</view>
						<!-- <view>
							<text>总价：￥{{total}}.00</text>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="mid">
			<view class="mid_content">
				<view><text>定金</text></view>
				<view class="red">￥{{num*200}}</view>
			</view>
		</view>
		<view class="mid">
			<view class="mid_content">
				<view><text>优惠券</text></view>
				<view class="icon">&#xe65b;</view>
			</view>
		</view>
		<view class="mid">
			<view class="mid_content">
				<view><text>余额抵扣</text></view>
				<view class="red">￥{{account}}</view>
			</view>
		</view>
		<view class="ziliao">
			<view class="ziliao_title">
				<view class="ziliao_title1">
					<text class="icon">&#xe67c;</text>
					<text>资料填写</text>
				</view>
			</view>
			<view class="ziliao_content">
				<view class="ziliao_content1">
					<view>
						<text>您的姓名</text>
					</view>
					<view class="ziliao_input">
						<input v-model="name" type="text" placeholder="请输入姓名" placeholder-style="font-size:28rpx" />
					</view>
				</view>
			</view>
			<view class="ziliao_content">
				<view class="ziliao_content1">
					<view>
						<text>电话号码</text>
					</view>
					<view class="ziliao_input">
						<input v-model="tel" type="number" placeholder="请输入电话号码" placeholder-style="font-size:28rpx" />
					</view>
				</view>
			</view>
			<view class="ziliao_content">
				<view class="ziliao_content1">
					<view>
						<text>身份证号</text>
					</view>
					<view class="ziliao_input">
						<input v-model="idNum" type="text" placeholder="请输入身份证号码" placeholder-style="font-size:28rpx" />
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="footer_left">总计：<text class="red">￥{{total}}</text></view>
			<view class="footer_right">
				<button type="warn" class="footer_button" @click="zhifu">确认支付</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				tel: '',
				idNum: '',
				orderList: [],
				num: 0,
				total: 0,
				account:0,
				//定义对象
				appinfo:{
					startTime: '',
					endTime: '',
					days: 0,
					campName:'',
					carName:'',
					price:0,
					url:'',
					total: 0,
					name: '',
					tel: '',
					idNum:'',
					appId:''
				},
				list:[],
				orderInfo:'',
				user:''
			}
		},
		onLoad(options) {
			this.setParam(options)
		},
		methods: {
			// 页面加载赋初值
			setParam(param) {
				var a = uni.getStorageSync("carcache")
				this.orderList = a;
				this.num = this.orderList.length;
				this.user = uni.getStorageSync("user");
				if(this.orderList[0].total>=this.user.account){
					this.account = this.user.account;
					this.total = this.orderList[0].total-this.user.account;
				}else{
					this.account = this.orderList[0].total;
					this.total = 0.01;
				}
				
			},
			//支付成功后调用 生成预约信息
			addAppointment(){
				uni.request({
					url: this.webUrl+'order/addAppointment/success',
					data: JSON.stringify(this.list),
					method:'POST',
					header: {
					    'custom-header': 'application/json' //自定义请求头信息
					},
					success: (res) => {
						this.camps = res.data.list;
					}
				});
			},
			zhifu() {
				for(var i=0;i<this.orderList.length;i++){
					this.appinfo=this.orderList[i];
					this.appinfo.name = this.name;
					this.appinfo.tel = this.tel;
					this.appinfo.idNum = this.idNum;
					this.appinfo.userId = this.user.userId;
					this.list.push(this.appinfo)
				}
				//新增订单信息
				var a = '';
				uni.request({
					url: this.webUrl + 'carOrder/addCarOrder',
					data:{
						'orderName':this.list[0].carName,
						'orderTotal':this.total,
						'orderDiscount':this.account,
						'userId':this.user.userId
					},
					success: (res) => {
						console.log(res.data.obj)
						a = res.data.obj;
					}
				});
				var _this = this;
				setTimeout(function() {
					_this.orderInfo = a;
				}, 200)
				//支付支付
				const jyAliPay = uni.requireNativePlugin('JY-ALIPAY')
				jyAliPay.show({ // 发起支付
				    if_sanbox:true, 
				    auto_create_order_info:true,
				    appid:'2016102100732354',
				    rsa2_private:"MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCmAl8QTWuGki+mmA/4m/PWVO4JwhkB93nsGZnzNioqg6CiStDucAUom1jfWkntAnzvJ3xuC/Ggu6ldM3CDxl0IC1/2/UKB7fpQaf8QIYbncjhZsYlORg8t8QPMH84xtyXHt9Fdcu48xb8XpztSKtrVlWbgYmSgkeMUy5GydG0F3iCfecB1yt7x0TwF7ldzBfpeWMLnzD5KBk+uQiK9ch9YZ9ROJ6pdMEHB/tTExKcK+N1+xvMSoSLnv1kip320itgVOSdwsbVRXl3sAo48lv8cy4/Vq7CKhGKE8yKzu1F/gVpzSYq68RJU3Lnrzr0Nl8mWMEzzunO0SrJVXoeixorRAgMBAAECggEAFeX4LklYJr8/4+TpLm08BAjeAZGGBPllLtzNrwR1GXiVhvMBjoJeW9XqKkRZvhb27gEya73NmNtIYw/3BprzCK2fchBEZqlCvLrOt40Eo6Ewh7xglV+ufuvtCU8kvvAe3rKDvqT7gi6/n1oi/BrFFSmJEY5JIdk8sDCOPpEXFI/bCV8tQiyBfSSEWPkZFeicwbZLpI517yMudf8gNe/7KTW70fzOjqcsBWOT8cvNhefmt4/TkQb3hE+OyVNuZhmPj4jFqi47PKzQqX2N6Bb+RFCNy2S26rNGLWYlYs3rmubNDI9+Haqki3IHt7Zn04cK8/zYtUaakWKVyMpH+l3VNQKBgQDeNHf1jRKgoMM/lxN6e9U8/lgJgFkU+8tTZZiJ28jsyVoZvipiiKIW/4m/486By7xTmT8e6K8bnjhq0DZ5ampZFXK+vucJrOITc17cvTct/lcuwbJ3PnNeplKeWvE0bvMMcbHws9Js5xPHS4Ty7LxJYCg4/9XzA+VeaG/1fJpRzwKBgQC/Qe2bm4bjruV9xBEFzQ+N1lzHakoiLk4CM3jg5a67bA4GJEy+kBHVdYGgm+mjuwijnbvapz/sPidWxMxouCsMVjQ8XbH9rAFrLxruXJy4He1IpjbtVCy01/RizB8AG+KsEwwqgKB9oIYT8qMOJnVDpxGA8+IjaPdIZSgdZcGhXwKBgFNgXq69m4K4L+sZdg6cjpvPWBtglIyCGn4VfhIkbRUkTHGiYGcOm7uDcR2WjjM3zleUBhJD/wie6s5xiC8w1ezNVnvqR+jifQYNYUf0m9LfP7lkpuGFhma6g/+1YhJpmztNIhaOcuO4JTy/woggeloSAaW5oX8JNDSjfXcgpQsTAoGBAKhIGgkQj19GRCaknVW9WDI0qu3LV+87Tugg4fsAHP5L1QsSZXRGz2pCOgxXIvwtVSyhXOjGwDfdeD+gaTq60SXJs6xpxHKvJZBpogiY9EwMCPwjQ7EOn0d/vEgx0hUGdCtzlwDOrGfdFhv3IgERVZxxI7WS4SbG9M1+NA2puvWBAoGAVu/fQJLGG/f85gOrTdkXx8rVvYuOBFGrvnlnDL8RryKesNrP1Q6dAfiippCgR6OPtNR8xxZwUNFYB0XgIYgNE0EQ4Wyt9s/YAl50jMnO3gicF1qvfPeCa5X6htI/2v/b3rnvbAwdVgNfeHidUTfdocGoCSxq1NobjhmvJwzxuBw=",
				    order_info:'http://openapi.alipaydev.com/gateway.do?charset=UTF-8&biz_content={"out_trade_no":"202006091742176318992","total_amount":"88.88","subject":"iPhone+Xs+Max+256G","buyer_id":"2088102175953034","goods_detail":[],"seller_id":"2088102175107499"}&method=alipay.trade.create&sign=Jjld5wh2dPfeM1wd+P5OujWFJOaz9xiFp8q4A4thUIA6GLpd5TKDHiHcg9iUmxlypNueipXbzsN5J3fvRLVdrwGtBjgKtqb2tUasBxiiWbuvydtcDYpwi7K4b+Cs7PHwutCQ0Ao6Tk0TNUtiBDTY/3ZxDjWOklHVJFDAz64ypVp8VSpjId4YW2irYDPgo2c4UUmFF3lKTXfp2EZX6E7kAujmpwvYjjMzAAr9Hi87tplMTpzfnkMHjRNZCXnyH+V8AKrOxu7k/UQC41O2Z34e9MF3aV2ymX+BFLBJbC3Eu42bK0Ej+RBPra9BimMioLebp3G+qmDUa3CgjiTTmgk7HA==&app_id=2016091100484533&sign_type=RSA2&version=1.0&timestamp=2020-06-09+17:42:17'
				}, function (result) { // 支付完成回调
				    console.log(result)
				     if(result.resultStatus == '5002555')
				     {
						 console.log('SDK错误')
				     }else if(result.resultStatus == '9000')
				     {
						 console.log('支付成功')
				        _this.addAppointment();
				        uni.navigateTo({
				        	url:'../camp_order/camp_order'
				        })
				     }else{
				         that.vusui.msg(result.memo)
				     } 
				});
				
				
				
			}
		}
	}
</script>

<style lang="scss">
	.outtor {
		width: 750rpx;
		min-height: 1450rpx;
		background-color: #F5F5F5;
	}

	.footer {
		width: 750rpx;
		height: 100rpx;
		position: fixed;
		bottom: 0rpx;
		background-color: #F0F0F0;
		display: flex;
		line-height: 100rpx;
		justify-content: space-between;
		font-size: 28rpx;

		.footer_left {
			width: 25%;
			margin-left: 20rpx;

			.red {
				color: #FF3333;
			}
		}

		.footer_right {
			.footer_button {
				font-size: 28rpx;
				margin-top: 25rpx;
				margin-right: 25rpx;
				width: 180rpx;
				height: 60rpx;
				line-height: 60rpx;
			}
		}
	}

	.ziliao {
		width: 750rpx;
		height: 406rpx;
		background-color: white;
		margin-top: 20rpx;
		font-size: 28rpx;

		.ziliao_title {
			border-bottom: 1rpx solid #AAAAAA;

			.ziliao_title1 {
				margin-left: 25rpx;

				.icon {
					color: red;
					margin-right: 10rpx;
				}
			}

			height: 100rpx;
			line-height: 100rpx;
		}

		.ziliao_content {
			border-bottom: 1rpx solid #AAAAAA;
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;

			.ziliao_content1 {
				margin-left: 25rpx;
				display: flex;
				flex-wrap: wrap;
				position: relative;

				.ziliao_input {
					position: relative;
					top: 30rpx;
					left: 50rpx;
				}
			}
		}
	}

	.mid {
		width: 100%;
		height: 100rpx;
		background-color: white;
		margin-top: 20rpx;
		font-size: 25rpx;
		color: #888888;

		.mid_content {
			width: 90%;
			margin: 0 auto;
			line-height: 100rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.red {
				color: #FF3333;
			}
		}
	}

	.order_detail {
		width: 100%;
		font-size: 30rpx;
		background-color: white;
		position: relative;
		margin-top: 10rpx;

		.order_detail_content {
			border-top: 1rpx solid #AAAAAA;
			width: 100%;
			height: 280rpx;

			.content_left {
				width: 30%;
				padding-top: 20rpx;
				padding-left: 20rpx;

				image {
					width: 100%;
					height: 100rpx;
				}
			}

			.content_right {
				width: 70%;
				position: relative;
				top: -110rpx;
				left: 250rpx;
				text-align: center;
				font-size: 28rpx;
				margin-left: 20rpx;

				.content_right_top {
					width: 100%;
					height: 90rpx;
					display: flex;
					flex-wrap: wrap;

					.quan {
						width: 120rpx;
						height: 50rpx;
						line-height: 50rpx;
						border: 1rpx solid #AAAAAA;
						border-radius: 30rpx;
						margin-top: 15rpx;
						margin-left: 20rpx;
						margin-right: 20rpx;
					}

					.blue {
						color: #4CA2FF;
					}
				}

				.content_right_bottom {
					width: 100%;
					height: 120rpx;
					line-height: 40rpx;
					text-align: left;
				}
			}
		}
	}
</style>
